<template>
	<view class="brand-item">
		<view class="brand-header" @click="goDetail(item.sign_id)">
			<view class="bg-logo">
				<image class="bg-img" :src="item.brand.image.file_path" mode="aspectFill"></image>
				<image class="brand" src="../static/images/brand/brand.png" mode="aspectFill"></image>
			</view>
			<view class="right-item">
			    <view>
					<view class="title text-ellipsis line-colam-2">{{item.selling_points}}</view>
					<view class="place">
						<view class="count">{{item.product_down}}件单品</view>
						<view class="tag" v-for="tag in item.supplier.supplierApply.servers">{{tag.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="brand-content">
			<view class="time-block">
				<view class="time-title">距本场结束</view>
				<view class="time">
					<view class="time-fill">{{day}}</view>
					<view class="time-text">天</view>
					<view class="time-fill">{{hour}}</view>
					<view class="time-text">:</view>
					<view class="time-fill">{{minute}}</view>
					<view class="time-text">:</view>
					<view class="time-fill">{{second}}</view>
				</view>
			</view>
			<view class="good-list">
				<view class="good-item" v-for="(good, goodIndex) in item.signLog">
					<block v-if="goodIndex < 3 && good.product">
						<image @click="goGood(good.log_id)" :src="good.product.image[0].file_path" mode="aspectFill"></image>
						<view class="title text-ellipsis-1">{{good.product.product_name}}</view>
						<view class="price text-ellipsis-1">
							<text class="now-price">￥{{good.product_brand_price}}</text>
							<text class="before-price">￥{{good.product.line_price && good.product.line_price != '0.00' ? good.product.line_price : good.product.product_price}}</text>
						</view>
					</block>
				</view>
				<!-- <view>
					<image :src="item.file_path" mode="aspectFill"></image>
				</view>
				<view>
					<image :src="item.file_path" mode="aspectFill"></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				temp: {},
				timer: null,
				seconds: 0,
				timeStr: '00天00时00分00秒',
				btnText: '',
				btnType: 0,
				day: 0,
				hour: 0,
				minute: 0,
				second: 0
			}
		},
		created() {
			let _self = this
			_self.temp = _self.item
			
			_self.timer = setInterval(() => {
				let time = _self.temp.brandday.activity_end_at * 1000
				_self.countDown(time)
			}, 1000)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pagesBrand/brand/index?sign_id='+id
				})
			},
			goGood(id) {
				uni.navigateTo({
					url: '/pagesBrand/brand/detail?log_id='+id
				})
			},
			startData() {
				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
				if (this.seconds <= 0) {
					return
				}
				this.countDown()
				this.timer = setInterval(() => {
					this.seconds--
					if (this.seconds < 0) {
						this.timeUp()
						return
					}
					this.countDown()
				}, 1000)
			},
			timeUp() {
				clearInterval(this.timer)
			},
			countDown(value) {
				let _self = this
				var the = new Date(parseInt(value))
				var date = the - new Date()
				if (date <= 0) {
					_self.temp.leftTime = '00天00时00分00秒'
					this.timeUp()
					return
				}

				var days = Math.floor(date / 1000 / 60 / 60 / 24) // 从这里开始
				var daysmod = date - days * 24 *60 * 60 * 1000 
				var hours = Math.floor(daysmod / 1000 / 60 / 60) 
				var hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) 
				var minutes = Math.floor(hoursmod / 1000 / 60)
				var minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
				var seconds = Math.floor(minutesmod / 1000) // 到这里结束，是将总毫秒转化成对应天数+小时数+分钟数+秒数的转换方法
				
				let timeStr = ''
				if (days < 0) {
					days = 0
				} else if (days < 10) {
					days = '0' + days
				}
				if (hours < 0) {
					hours = 0
				} else if (hours < 10) {
					hours = '0' + hours
				}
				if (minutes < 0) {
					minutes = 0
				} else if (minutes < 10) {
					minutes = '0' + minutes
				}
				if (seconds < 0) {
					seconds = 0
				} else if (seconds < 10) {
					seconds = '0' + seconds
				}
				
				_self.day = days
				_self.hour = hours
				_self.minute = minutes
				_self.second = seconds
				
				_self.timeStr = days + '天' + hours + '时' + minutes + '分' + seconds + '秒'
				return
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background: #F0F0F0;
	}
	.brand-item {
		border-radius: 20rpx;
		background: #ffffff;
	}
	.brand-header {
		display: flex;
		padding: 32rpx 24rpx;
		border-radius: 20rpx 20rpx 0 0;
		border-bottom: 1rpx solid #DEDEDE;
		// background: linear-gradient(180deg, #E8E8E8 0%, rgba(255, 255, 255, 0) 100%);
	}
	.brand-content {
		border-radius: 20rpx;
		padding: 20rpx 24rpx 32rpx;
		border-radius: 0 0 20rpx 20rpx;
		.time-block {
			display: flex;
			align-items: center;
			.time-title {
				color: #999999;
				font-size: 24rpx;
				margin-right: 96rpx;
			}
			.time {
				display: flex;
				align-items: center;
				color: red;
				.time-fill {
					font-size: 24rpx;
					background: #F63E36;
					color: #ffffff;
					padding: 0 5rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 4rpx;
					min-width: 32rpx;
				}
				.time-text {
					width: 32rpx;
					text-align: center;
				}
			}
		}
		.good-list {
			display: flex;
			margin-top: 10rpx;
			justify-content: space-between;
			.good-item {
				font-size: 24rpx;
				text-align: center;
				margin-right: 10rpx;
				.title {
					width: 204rpx;
				}
				.price {
					width: 200rpx;
					.now-price {
						font-size: 28rpx;
						font-weight: bold;
					}
					.before-price {
						font-size: 22rpx;
						color: #C4C4C4;
						text-decoration: line-through;
					}
				}
			}
			image {
				width: 200rpx;
				height: 206rpx;
				border-radius: 8rpx;
			}
		}
		.good-list:after {
			width: 200rpx;
			content: '';
		}
	}
	.right-item {
		margin-left: 28rpx;
		.title {
			color: #373840;
			font-weight: 500;
			font-size: 32rpx;
		}
		.place {
			display: flex;
			color: #A4A4AC;
			font-size: 24rpx;
			align-items: center;
			.count {
				margin-right: 16rpx;
			}
			.tag {
				font-size: 20rpx;
				background: #FFE5E4;
				color: #F63E36;
				height: 30rpx;
				margin-right: 10rpx;
				padding: 0 5rpx;
				border-radius: 8rpx;
			}
		}
	}
	.bg-logo {
		position: relative;
		.bg-img {
			width: 112rpx;
			height: 112rpx;
			border-radius: 8rpx;
		}
		.brand {
			width: 64rpx;
			height: 30rpx;
			position: absolute;
			top: -5rpx;
			right: -5rpx;
		}
	}
</style>
